<template>
  <div>
    <div class="item_title">

      <div class="itemText">
        <span v-if="title==='区域上网电量排行'">区域上网电量排行</span>
        <span v-if="title==='集团上网电量排行'">集团上网电量排行</span>
        <span v-if="title==='正常在运电站状态'">正常在运电站状态</span>
        <span v-if="title==='区域产值分析'">区域产值分析</span>
        <span v-if="title==='集团产值分析'">集团产值分析</span>
        <span v-if="title==='年度统计'">年度统计</span>
      </div>
    </div>
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
import Tabs from '@/components/large/Tabs.vue'

export default {
  components: { Tabs },
  data() {
    return {
    }
  },
  props: {
    title: {
      type: String,
      default: () => ''
    }
  },
  created() {
  },

  mounted() {
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
$item-title-height: 38px;
$item_title_content-height: calc(100% - 38px);
@font-face {
  font-family: "YouSheBiaoTiHei";
  src: url("../../assets/font/YouSheBiaoTiHei.ttf");
}
.lr_titles {
  box-sizing: border-box;

  .item_title {
    height: 30vh;
    line-height: 30vh;
    width: 100%;
    color: #31abe3;
    margin-bottom: 10px;

    .you {
      transform: rotate(180deg);
    }

    .title-inner {
      font-weight: 900;
      letter-spacing: 2px;
      background: linear-gradient(
          92deg,
          #0072ff 0%,
          #00eaff 48.8525390625%,
          #01aaff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .item_title_content {
    height: $item_title_content-height;
  }

  .item_title_content_def {
    width: 100%;
    height: 100%;
  }

  .itembg {
    width: 100%;
    height: 100%;
    color: whitesmoke;
    text-align: start;
    align-items: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: space-between;
  }

  .itembg span {
    display: inline-block;
    margin-left: 40px;
  }
}
.itemText {
  width: 100%;
  height: 50px;
  background-image: url("~@/assets/img/lagerItem.png");
  background-repeat: no-repeat;
  span{
    margin-left: 70px;
    font-size: 22px;
    line-height: 60px;
    letter-spacing: 5px;
    font-family: YouSheBiaoTiHei;
    background: linear-gradient(to bottom, #FFFFFF ,  #FFFFFF , #129BFF); /* 渐变颜色 */
    -webkit-background-clip: text;  /* 让背景渐变应用于文字 */
    background-clip: text;          /* 在非webkit浏览器中兼容 */
    color: transparent;             /* 使文字颜色透明，以便显示背景渐变 */
  }
}
</style>
